import React, { Component } from "react";
import { Card, List } from "antd";
import { ArrowLeftOutlined } from "@ant-design/icons";
import LinkButton from "../../components/link-button";
import { reqCateGory } from "../../api/index";
const Item = List.Item;

export default class ProductDetail extends Component {
  state = {
    cName1: "", //一级分类名称
    cName2: "", //二级分类名称
  };
  async componentDidMount() {
    //得到商品ID
    const { pcategoryid, categoryid } = this.props.location.state.product;
    if (pcategoryid === "0") {
      //一级分类
      const result = await reqCateGory(pcategoryid);
      //  console.log("wxf", result.data);
      const cName1 = result.data.data[0].name;
      this.setState({ cName1 });
    } else {
      //二级分类
      //通过多个await发送多个请求
      //const result1 = await reqCateGory(pcategoryid);
      // console.log("hyt", result1.data.data[0].name);
      // const result2 = await reqCateGory(categoryid);
      // const cName1 = result1.data.data[0].name;
      // const cName2 = result2.data.data[0].name;
      // this.setState({ cName1, cName2 });

      //一次发送多个请求
      const result = await Promise.all([
        reqCateGory(pcategoryid),
        reqCateGory(categoryid),
      ]);
      const cName1 = result[0].data.data[0].name;
      const cName2 = result[1].data.data[0].name;
      this.setState({ cName1, cName2 });
    }
  }
  render() {
    //读取状态属性
    const { name, descp, price, imgs, detail } =
      this.props.location.state.product;
    const { cName1, cName2 } = this.state;
    console.log(this.props.location.state.product);
    const title = (
      <span>
        <LinkButton>
          <ArrowLeftOutlined
            style={{ color: "green", marginRight: 15 }}
            onClick={() => this.props.history.goBack()}
          />
        </LinkButton>
        <span>商品详情</span>
      </span>
    );
    console.log("wcfdcjgdhdfhdfjhd");
    return (
      <div>
        <Card title={title} className="product-detail">
          <List>
            <Item>
              <span className="left">商品名称:</span>
              <span>{name}</span>
            </Item>
            <Item>
              <span className="left">商品描述:</span>
              <span>{descp}</span>
            </Item>
            <Item>
              <span className="left">商品价格:</span>
              <span>{price}</span>
            </Item>
            <Item>
              <span className="left">所属分类:</span>
              <span>
                {cName1} {cName2 ? "-->" + cName2 : ""}
              </span>
            </Item>
            <Item>
              <span className="left">商品图片:</span>
              <span>
                <img
                  key={imgs[0]}
                  className="product-img"
                  src={imgs[0]}
                  alt="img"
                />
              </span>
            </Item>
            <Item>
              <span className="left">商品详情:</span>
              <span dangerouslySetInnerHTML={{ __html: detail }}></span>
            </Item>
          </List>
        </Card>
      </div>
    );
  }
}
